<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tabs and Toggles | Bolder Premium Wordpress Theme</title>
                        
    <!-- BEGIN .styles -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />                      
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />   
    <link rel="stylesheet" href="css/tipsy.css" type="text/css" media="screen" />              
    <link rel="stylesheet" href="css/jCarousel.css" type="text/css" media="screen" />  
    
    <!--[if IE]> 
        <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" /> 
    <![endif]-->
    <!--[if IE 7]>
        <link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen" />
    <![endif]-->
	  
    <link rel="stylesheet" href="css/colors/black.css" type="text/css" media="screen" />   <!-- COLOR -->                
	<!-- END .styles -->           
    
    <!-- BEGIN .scripts -->
	<script type='text/javascript' src='js/jquery.js'></script>
	<script type='text/javascript' src='js/ui.core.js'></script>
	<script type='text/javascript' src='js/jquery.cycle.all.min.js'></script>
	<script type='text/javascript' src='js/jquery.nivo.slider.pack.js'></script>
	<script type='text/javascript' src='js/jquery.easing.1.3.js'></script>
	<script type='text/javascript' src='js/jquery.prettyPhoto.js'></script>
	<script type='text/javascript' src='js/jquery.jcarousel.min.js'></script>
	<script type='text/javascript' src='js/jquery.tipsy.js'></script>
	<script type='text/javascript' src='js/jquery.arrowFade.js'></script>
	<script type='text/javascript' src='js/ui.tabs.js'></script>
	<script type='text/javascript' src='js/jquery.custom.js'></script>                 
	<script type='text/javascript' src='js/jquery.tweetable.js'></script> 
	
	<script type='text/javascript' src='js/cufon-yui.js'></script>
	<script type='text/javascript' src='js/waukegan.font.js'></script>   
	<!-- END .scripts -->           

    <!-- [favicon] begin -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />  
    <!-- [favicon] end -->
      
    <script type="text/javascript">
        Cufon.replace('h1, h2, h3:not(#footer h3, .title-blog), h4, h5, h6, table th', {fontFamily: 'Waukegan'});
        //Cufon.replace('.sidebar-nav a', {fontFamily: 'Champagne', hover: true});       
        
        jQuery(document).ready(function($){
            $("a[rel^='prettyPhoto']").prettyPhoto({
                theme: 'facebook'});
        });
    </script>             
    
</head>                   
        
<body class="no_js">
    <div id="top-space"></div>

    <!-- START HEADER -->
    <div id="header">
        
        <div class="inner">
        
            <!-- START LOGO -->
            <div id="logo">
                <a href="index.php" title="Bolder Premium Wordpress Theme">Bolder Premium Wordpress Theme</a>
            </div>
            <!-- END LOGO -->
			
			<!-- START NAV -->
            <div id="nav">
				
				<ul class="level-1 black">
					
					<li>
						<a href="index.html">Home</a><span> welcome</span>
						<ul class="sub-menu">
							<li>
								<a href="#">Slider</a>
								<ul class="sub-menu">
									<li><a href="home_full_width_fade.html">Full width fade</a></li>
									<li><a href="home_nivo_big.html">Nivo big</a></li>
									<li><a href="index.html">Slider arrow</a></li>
								</ul>
							</li>
							<li><a href="#">Footer</a>
								<ul class="sub-menu">
									<li><a href="index.html">Big footer</a></li>
									<li><a href="home_small_footer.html">Small footer</a></li>
								</ul>
							</li>
							<li><a href="#">Body</a>
								<ul class="sub-menu">
									<li><a href="home_with_sidebar.html">With sidebar</a></li>
									<li><a href="index.html">Without sidebar</a></li>
									<li><a href="home_without_slider.html">Without slider</a></li>
								</ul>
							</li>
						</ul>
					</li>
					
					<li>
						<a href="#">Colors</a><span> &amp; skins</span>
						<ul class="sub-menu">
							<li>
								<a href="#">Colors</a>
								<ul class="sub-menu">                           
									<li><a href="index.html">Black</a></li> 
									<li><a href="skin_blue.html">Blue</a></li>
									<li><a href="skin_grey.html">Grey</a></li>
									<li><a href="skin_violet.html">Violet</a></li>
									<li><a href="skin_ciano.html">Ciano</a></li>
									<li><a href="skin_white.html">White</a></li>
									<li><a href="skin_red.html">Red</a></li>
									<li><a href="skin_green.html">Green</a></li>
									<li><a href="skin_brown.html">Brown</a></li>
									<li><a href="skin_pink.html">Pink</a></li>
									<li><a href="skin_darkgrey.html">Darkrey</a></li>
								</ul>
							</li>             
							<li>
								<a href="#">Skins</a>   
								<ul class="sub-menu">    
									<li><a href="skin_wood.html">Wood</a></li>
									<li><a href="skin_fun.html">Fun</a></li>
									<li><a href="skin_grunge.html">Grunge</a></li>
									<li><a href="skin_sketch.html">Sketch</a></li>  
								</ul>
							</li>      
						</ul>
					</li>
					
					<li>
						<a href="#">Corporate</a><span> other pages</span>
						<ul class="sub-menu">
							<li><a href="about_us.html">About us</a></li>
							<li><a href="full_width_page.html">Full width page</a></li>
							<li><a href="left_sidebar.html">Left sidebar</a></li>
							<li><a href="right_sidebar.html">Right sidebar</a></li>   
							<li><a href="404.html">404 Page</a></li>
						</ul>
					</li>
					
					<li>
						<a href="#">Portfolio</a><span> our works</span>
						<ul class="sub-menu">
							<li><a href="portfolio_3_column.html">3 Column</a></li>
							<li><a href="portfolio_with_slider.html">With slider</a></li>
							<li><a href="portfolio_big_image.html">Big Image</a></li>
						</ul>
					</li>
					
					<li>
						<a href="#">Shortcode</a><span> html tag &amp; more</span>    
						<ul class="sub-menu">
							<li><a href="shortcode_tipography.html">Tipography</a></li>
							<li><a href="shortcode_alertbox.html">Alert Box</a></li>
							<li><a href="shortcode_buttons.html">Buttons</a></li>
							<li><a href="shortcode_sections.html">33 Icon Section</a></li>
							<li><a href="shortcode_nivo.html">Nivo Slider</a></li>
							<li><a href="shortcode_tabs.html">Tabs and Toggles</a></li>
							<li><a href="shortcode_tables.html">Table</a></li>
							
							<li><a href="shortcode_lists.html">Styled List and Icon</a></li>
							<li><a href="shortcode_columns.html">Columns</a></li>
							
						</ul>
					</li>
					
					<li><a href="blog.html">Blog</a><span> news</span></li>
					
					<li>
						<a href="contact.html">Contact</a><span> get in touch</span>
						<ul class="sub-menu">
							<li><a href="contact.html">With google map</a></li>
							<li><a href="contact_without_map.html">Without map</a></li>
						</ul>
					</li>
					
				</ul>
				
			</div>            
			<!-- END NAV -->
            
            <div class="clear"></div>
            
        </div>
            
    </div>
    <!-- END HEADER -->   

    
    <!-- START CONTENT -->
    <div id="content">
    
        <div class="inner">                 
			<div class="text">
            
                <h2>Toggles</h2>
                
                <div class="toggle-title"> 
                    <span class="open-toggle closed">&nbsp;</span>
                    
                    <h4><a href="#" title="Open">Click to open: this is a toggle</a></h4>
                </div>
                
                <div class="toggle-content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing lorem 
                        ipsum dolor sit amet, consectetur adipiscing elit. 
                        <strong>Donec blandit enim libero</strong>, quis tincidunt arcu.
                        <br/>
                        Eaque ipsa quae ab illo veritatis et quasi architecto beatae vitae dicta.
                    </p>
                </div>
                
                <div class="toggle-title"> 
                    <span class="open-toggle closed">&nbsp;</span>
                    
                    <h4><a href="#" title="Open">Click to open: this is a toggle</a></h4>
                </div>
                
                <div class="toggle-content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing lorem 
                        ipsum dolor sit amet, consectetur adipiscing elit. 
                        <strong>Donec blandit enim libero</strong>, quis tincidunt arcu.
                        <br/>
                        Eaque ipsa quae ab illo veritatis et quasi architecto beatae vitae dicta.
                    </p>
                </div>
                
                <div class="toggle-title"> 
                    <span class="open-toggle closed">&nbsp;</span>
                    
                    <h4><a href="#" title="Open">Click to open: this is a toggle</a></h4>
                </div>
                
                <div class="toggle-content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing lorem 
                        ipsum dolor sit amet, consectetur adipiscing elit. 
                        <strong>Donec blandit enim libero</strong>, quis tincidunt arcu.
                        <br/>
                        Eaque ipsa quae ab illo veritatis et quasi architecto beatae vitae dicta.
                    </p>
                </div>
                
                <br/>
                

<pre>&lt;div class="toggle-title"&gt; 
    &lt;span class="open-toggle closed"&gt;&nbsp;&lt;/span&gt;
    
    &lt;h4&gt;&lt;a href="#" title="Open"&gt;Your Title&lt;/a&gt;&lt;/h4&gt;
&lt;/div&gt;

&lt;div class="toggle-content"&gt;
    &lt;p&gt;Your Text&lt;/p&gt;
&lt;/div&gt;</pre>  

                <h2>Tabs</h2>
                
                <div class="tabs-container">
                    <ul class="tabs">
                        <li class="open-tab"><h4><a href="#tab1">Tab 1</a></h4></li>
                        <li><h4><a href="#tab2">Tab 2</a></h4></li>
                        <li><h4><a href="#tab3">Tab 3</a></h4></li>
                    </ul>
                    
                    <div class="clear"></div>
                    
                    <div class="border">
                        <div id="tab1" class="panel">
                            <h5><strong>Your Title of Tab 1</strong></h5>              
                            
                            <img src="http://www.yourinspirationweb.com/tf/bolder/wp-content/uploads/2011/01/post2-150x150.jpg" alt="tab1" class="alignleft" />
                            
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing lorem 
                                ipsum dolor sit amet, consectetur adipiscing elit. 
                                <strong>Donec blandit enim libero</strong>, quis tincidunt arcu.
                                Eaque ipsa quae ab illo veritatis et quasi architecto.
                            </p>
                            
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing lorem 
                                ipsum dolor sit amet, consectetur adipiscing elit. 
                                <strong>Donec blandit enim libero</strong>, quis tincidunt arcu.
                                Eaque ipsa quae ab illo veritatis et quasi architecto.
                            </p>
                            
                            <div class="clear"></div>
                        </div>
                        
                        <div id="tab2" class="panel">
                            <h5><strong>Your Title of Tab 2</strong></h5>
                            
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing lorem 
                                ipsum dolor sit amet, consectetur adipiscing elit. 
                                <strong>Donec blandit enim libero</strong>, quis tincidunt arcu.
                                <br/>
                                Eaque ipsa quae ab illo veritatis et quasi architecto beatae vitae dicta.
                            </p>                           
                            
                            <div class="clear"></div>
                        </div>
                        
                        <div id="tab3" class="panel">
                            <h5><strong>Your Title of Tab 3</strong></h5>
                            
                            <ul class="short arrow">
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>consectetur adipiscing elit</li>
                                <li>Nulla scelerisque</li>
                            </ul>                       
                            
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
                
                <br/>
                
<pre>
&lt;div class="tabs-container"&gt;
    &lt;ul class="tabs"&gt;
        &lt;li class="open-tab"&gt;&lt;h4&gt;&lt;a href="#tab1"&gt;Tab 1&lt;/a&gt;&lt;/h4&gt;&lt;/li&gt;
        &lt;li&gt;&lt;h4&gt;&lt;a href="#tab2"&gt;Tab 2&lt;/a&gt;&lt;/h4&gt;&lt;/li&gt;
        &lt;li&gt;&lt;h4&gt;&lt;a href="#tab3"&gt;Tab 3&lt;/a&gt;&lt;/h4&gt;&lt;/li&gt;
    &lt;/ul&gt;
    
    &lt;div class="clear"&gt;&lt;/div&gt;
    
    &lt;div class="border"&gt;
	    &lt;div id="tab1" class="panel"&gt;
	        &lt;h5&gt;&lt;strong&gt;Your Title of Tab 1&lt;/strong&gt;&lt;/h5&gt;              
	        
	        &lt;p&gt;Your Text&lt;/p&gt;
	        
	        &lt;div class="clear"&gt;&lt;/div&gt;
	    &lt;/div&gt;
	    
	    &lt;div id="tab2" class="panel"&gt;
	        &lt;h5&gt;&lt;strong&gt;Your Title of Tab 2&lt;/strong&gt;&lt;/h5&gt;             
	        
	        &lt;p&gt;Your Text&lt;/p&gt;                      
	        
	        &lt;div class="clear"&gt;&lt;/div&gt;
	    &lt;/div&gt;
	    
	    &lt;div id="tab3" class="panel"&gt;
	        &lt;h5&gt;&lt;strong&gt;Your Title of Tab 3&lt;/strong&gt;&lt;/h5&gt;             
	        
	        &lt;p&gt;Your Text&lt;/p&gt;        
	        
	        &lt;div class="clear"&gt;&lt;/div&gt;
	    &lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>


            </div><!-- .text -->
			
			            
            <!-- START SIDEBAR -->
            <div class="sidebar">     
    			
				<!-- SHORTCODE MENU -->
				<div class="widget">
					<h2>Shortcodes</h2>
					
					<ul class="menu">
						<li><a href="shortcode_tipography.html">Tipography</a></li>
						<li><a href="shortcode_alertbox.html">Alert Box</a></li>
						<li><a href="shortcode_buttons.html">Buttons</a></li>
						<li><a href="shortcode_sections.html">33 Icon Section</a></li>
						<li><a href="shortcode_nivo.html">Nivo Slider</a></li>
						<li><a href="shortcode_tabs.html">Tabs and Toggles</a></li>
						<li><a href="shortcode_tables.html">Table</a></li>
						
						<li><a href="shortcode_lists.html">Styled List and Icon</a></li>
						<li><a href="shortcode_columns.html">Columns</a></li>
						
					</ul>
				</div> 
				<!-- END SHORTCODE MENU -->
				          
    		</div>            
            <!-- END SIDEBAR -->
                        
        </div>              
    
    	<div class="clear"></div>
    
    </div>
    <!-- END CONTENT -->  
    
	<!-- START FLASH NEWS -->
	<div class="news-home">
        
        <div class="inner">
            <h2>News</h2>
            
            <ul>
                <li><a href="#">Bolder, a new WordPress Theme – buy it on Theme Forest</a> | January 16, 2011</li>
                <li><a href="#">All right! Now the news are dynamics!</a> | January 16, 2011</li>
                <li><a href="#">Make your choice from 18 different skins</a> | January 16, 2011</li>
            </ul>
        </div>        
            
        <div class="clear"></div>
                      
    </div>
	<!-- END FLASH NEWS -->
    
	<!-- START FOOTER -->
    <div id="footer">
        <div class="inner five">
        
        	<!-- START COMPANY MENU -->
            <div class="section">
				<h3>Company</h3>
				
				<ul class="menu">
					<li><a href="about.html">About us</a></li>
					<li><a href="services.html">Services</a></li>
					<li><a href="portfolio.html">Portfolio</a></li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</div>            
        	<!-- END COMPANY MENU -->
			                         
        	<!-- START TWITTER -->
			<div class="section">
				<h3>Tweets</h3>   	              
				
				<div class="twitter-container"></div>
					
				<script type="text/javascript">
				jQuery(function(){
					jQuery('.twitter-container').tweetable({
						id: 'tweets',
						username: 'YIW', 
						time: true, 
						limit: 2, 
						replies: true
					});
				});
				</script>
			</div>                
        	<!-- END TWITTER -->
			                         
        	<!-- START FLICKR -->
			<div class="section">
				<h3>Flickr</h3>
				
				<div class="flickr">    
					<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&amp;display=latest&amp;&amp;layout=x&amp;source=user&amp;user=43893867@N04&amp;size=s"></script>
				</div>
			</div>
        	<!-- END FLICKR -->
			                         
        	<!-- START SOCIALS -->
			<div class="section">
				<h3>Socials</h3>
				
				<ul class="menu">
					<li><a href="http://feeds.feedburner.com/yourinspirationweb/HuJt">Subscribe feed</a></li>
					<li><a href="http://www.facebook.com/YIWeb">Our Facebook page</a></li>
					<li><a href="http://twitter.com/YIW/">Follow us on twitter</a></li>
					<li><a href="#">Flickr</a></li>
					<li><a href="#">LinkedIn</a></li>
				</ul>
			</div>
        	<!-- END SOCIALS -->
			                         
        	<!-- START GET IN TOUCH -->
			<div class="section last">
				<h3>Get in touch</h3>			
				
				<div class="textwidget">
					<address>
					  	Bolder Theme,<br />
					  	115 Avenue street NY<br />
					
					  	<strong>Phone</strong>: + 39 347 8785621<br />
					</address>
                
					<a href="#" class="contact">
					   <strong>Have a question?</strong><br />
					    <span>Contact us</span>    
					</a>
				</div>
			</div>  
        	<!-- END GET IN TOUCH -->
    
            <div class="clear"></div>  
        
        </div> 
    </div>
    <!-- END FOOTER -->  
      
    
    <!-- START COPYRIGHT -->
    <p id="copyright">Copyright 2010 - Bolder Theme, theme by <a href="http://www.yourinspirationweb.com/en">Your Inspiration Web</a> | purchase it on <a href="http://themeforest.net/?ref=Sara_p">Theme Forest</a></p>
    <!-- END COPYRIGHT -->                                    
    
    <script type="text/javascript">
        //<![CDATA[
        Cufon.now();  //]]>   
    </script>
    
         
    
    <script type="text/javascript">

	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-8632327-9']);
	  _gaq.push(['_trackPageview']);
	
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	
	</script>

</body>
</html>
